<template>
  <div>
    <!-- 简易版购物车功能 -->
    <button @click="add_cart('汽车')">添加汽车</button>
    <button @click="add_cart('电脑')">添加电脑</button>
    <button @click="reduce_cart('汽车')">删除汽车</button>
    <button @click="reduce_cart('电脑')">删除电脑</button>

    <table>
      <tr v-for="(item, index) in datalist">
        <td>{{ item.name }}</td>
        <td>
          {{ item.num }}
          <button @click="add(index)">+</button>
          <button @click="reduce(index)">-</button>
        </td>
      </tr>
    </table>

    <!-- 文本编辑器功能 -->
    <div @click.stop v-if="show_tooltip">
      <input type="text" v-model="text_content" style="width: 300px;">
    </div>
    <p @click.stop="toggleTooltip">{{ text_content }}</p>

    <!--  课程检索功能 -->
    <input type="text" v-model="searchString" placeholder="请输入检索关键字">
    <ul>
      <li v-for="item in filteredArticles">
        <p>{{ item.title }}</p>
      </li>
    </ul>

    <!-- 自定义过滤器 -->
    {{ 1 | myfilter }}
    <br>

    <!-- 监听属性 -->
    <button @click="counter++">点击增加</button>
    {{ counter }}
    <br>

    <!-- 计算属性 -->
    {{ reverse_msg }}
    <br>
    {{ reverse_msg2()}}
    <br>

    <!-- vue动态特效 -->
    <button @click="show = !show">点击隐藏</button>
    <transition name="fade">
      <p v-show="show">动态效果</p>
    </transition>

    <!-- 样式绑定 -->
    <div :class="{active:isActive}"></div>
    <br>

    <!-- 循环数据 -->
    <ul>
      <li v-for="(item, index) in tlist" :class="{}">
        {{ item.name }} {{ index }}
      </li>
    </ul>
    <br>

    <div v-if="type =='A'">
      A
    </div>
    <div v-else-if="type == 'B'">
      B
    </div>
    <div v-else>
      不是A也不是B
    </div>
    <br>

    <div v-if="ok">显示v-if</div>
    <br>

    <div v-show="ok">显示v-show</div>
    <br>

    <div v-html="msg"></div>
    <br>

    {{ msg }}

  </div>
</template>

<script>
  export default {
    name: "testvue",
    // 数据容器
    data() {
      return {
        msg: '<h1>这是一个变量</h1>',
        ok: true,
        type: 'C',
        tlist: [{'name': '水果'}, {'name': '家电'}, {'name': '食品'}],
        isActive: true,
        show: true,
        counter: 0,
        // 课程变量
        articles: [{'title': 'python在线学习'}, {'title': 'go long指南'}, {'title': 'Java大全'}],
        // 关键字
        searchString: '',
        // 隐藏提示框
        show_tooltip: false,
        text_content: '点击编辑内容',
        // 购物车列表
        datalist: [],

      }
    },

    // 自定义过滤器
    filters: {
      myfilter: function (value) {
        // 判断订单状态
        if (value == 1) {
          return '已支付';
        } else {
          return '未支付';
        }
      }
    },

    // 监听属性
    watch: {
      counter: function (nval, oval) {
        console.log('计数器的变化：' + oval + '变成了' + nval);
      }
    },

    // 计算属性
    computed: {
      // 实时监控用户搜索关键字
      filteredArticles: function () {
        // 赋值变量
        var articles_array = this.articles;
        var searchString = this.searchString;

        // 如果用户没有输入关键字，就返回所有课程
        if (!searchString) {
          return articles_array;
        }

        // 过滤多余空格
        searchString = searchString.trim();

        // 进行遍历模糊匹配
        articles_array = articles_array.filter(function (item) {
          // 匹配字符串
          if (item.title.indexOf(searchString) !== -1) {
            return item;
          }
        });
        // 返回课程列表
        return articles_array;
      },

      // 反转字符串
      reverse_msg: function () {
        return this.msg.split('').reverse().join('')
      }
    },

    // 钩子方法
    mounted: function () {

    },

    // 自定义方法
    methods: {
      // 增加商品数量
      add: function(index){
        this.datalist[index].num++;
      },
      reduce: function(index) {
        this.datalist[index].num--;
      },

      // 添加购物车方法
      add_cart:function(name){
        // 赋值
        var cartlist = this.datalist;
        // 声明定为坐标
        var find = 0;
        // 遍历购物车列表
        for(let i = 0, l = cartlist.length;i<l;i++){
          // 如果找到该商品
          if(name == cartlist[i]['name']){
            // 商品数加1
            cartlist[i]['num']++;
            // 定位坐标
            find = 1;
            // 结束循环
            break;
          }
        }
        // 判断如果是新加入的商品
        if(find==0){
          // 将商品新增到购物车内
          cartlist.push({name:name,num:1});
        }
        // 重新赋值
        this.datalist = cartlist;

      },

      // 移除购物车
      reduce_cart: function(name){
        // 赋值
        var cartlist = this.datalist;
        // 声明定为坐标
        var find = 0;
        // 遍历购物车列表
        for(let i = 0, l = cartlist.length;i<l;i++){
          // 如果找到该商品
          if(name == cartlist[i]['name']){
            // 商品数减1
            cartlist[i]['num']--;
            // 定位坐标
            find = 1;
            // 结束循环
            break;
          }
        }
        // 判断如果是新加入的商品
        if(find==0){
          // 将商品新增到购物车内
          cartlist.push({name:name,num:1});
        }
        // 重新赋值
        this.datalist = cartlist;
      },

      // 隐藏提示域
      hideTooltip:function(){
        // 在模型改变时，视图自动更新
        this.show_tooltip = false;
      },
      toggleTooltip:function(){
        this.show_tooltip = !this.show_tooltip;
      },
      reverse_msg2: function () {
        return this.msg.split('').reverse().join('')
      }
    }
  }


</script>

<style scoped>
  .on {
    background-color: #ee5556
  }

  .off {
    background-color: #2d672d;
  }

  .active {
    width: 100px;
    height: 100px;
    background-color: black;
  }

  /* 动态效果样式 */
  .fade-enter-active, .fade-enter-active {
    transition: opacity 3s;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }
</style>
